<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" :rules="rules" slot="form" label-width="78px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校" prop="schoolName">
                            <school v-model="query.schoolName" style="width:100%" @change='getSchoolId'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="e学云ID号" prop="eID">
                            <el-input v-model="query.eID" placeholder="请输入" style="width:100%" :maxlength="9"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="姓名" prop="teacherName">
                            <el-input v-model="query.teacherName" placeholder="请输入" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="月份">
                                 <el-date-picker
                                    @change="changeMonth"
                                    v-model="query.giveTimeStart" 
                                    style="width:100%"
                                    :clearable="false" 
                                    :editable="false" 
                                    type="month"
                                    :picker-options="query.pickerOptions1" 
                                    placeholder="选择月份">
                                </el-date-picker>
                            </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('query')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <exportExcel @ee="exportFile"></exportExcel>
                </div>
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%" :default-sort = "{prop: 'login', order: 'descending'}" @sort-change='sortChange'>
                <el-table-column label="e学云ID号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.moduleId | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="教师姓名" align="center">
                    <template scope="scope">
                        <span>{{scope.row.moduleName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="登录次数" align="center" sortable='custom' prop="loginNumber">
                    <template scope="scope">
                        <span>{{scope.row.loginNumber| isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="发布动态数" align="center" sortable='custom' prop="publishDynamicBtnNumber">
                    <template scope="scope">
                        <span>{{scope.row.publishDynamicBtnNumber| isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="布置作业数" align="center" sortable='custom' prop="releaseHomeWorkBtnNumber">
                    <template scope="scope">
                        <span>{{scope.row.releaseHomeWorkBtnNumber| isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="发布通知数" align="center" sortable='custom' prop="publishNoticeBtnNumber">
                    <template scope="scope">
                        <span>{{scope.row.publishNoticeBtnNumber| isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import TableLayout from 'components/TableLayout';
    import school from 'components/SchoolClasss/school';
    import exportExcel from 'components/ExportExcel'; 
    import { pageTeacherVitality} from 'api/reportForms';
    import validate from '@/utils/validate';
    import { mapState, mapActions, mapGetters } from 'vuex';

    export default {
        name: 'teacherActivList',
        components: {TableLayout, school, exportExcel},
        data() {
            return { 
                loading: false,  
                schoolList: [],
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    schoolName: '',
                    schoolId: '',
                    eID: '',
                    teacherName: '',
                    loginDays: '',
                    giveTimeStart: moment(new Date()).format('YYYY-MM'),
                    pickerOptions1: {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                },
                startTime: moment(new Date()).format('YYYY-MM')+'-01', // 月初
                endTime: moment(new Date()).format('YYYY-MM-DD'), // 昨天
                loginStatus: '1',
                newStatus: '', // 消息数排序
                dongtaiStatus: '', // 动态数排序
                numStatus: '', // 作业数排序
                rules: {
                    eID: [...validate.exueCode()],
                    loginDays: [
                        { pattern: /^\d+$/, trigger: 'blur', message: '请输入数字'}
                    ]
                }
            }
        },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            }),
            ...mapGetters([
                'uid'
            ])
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit(query) {
                this.$refs[query].validate((valid) => {
                    if (valid) {
                        this.pageQuery.currentpage = 1;
                        this.queryData();
                    }
                })
            },
            getSchoolId(schoolId) {
                this.query.schoolId = schoolId;
            },
            sortChange({ column, prop, order }) {
                this.loginStatus=prop=='loginNumber'?order=='ascending'?'0':'1':'';
                this.newStatus =prop=='publishNoticeBtnNumber'?order=='ascending'?'0':'1':'';
                this.dongtaiStatus =prop=='publishDynamicBtnNumber'?order=='ascending'?'0':'1':'';
                this.numStatus =prop=='releaseHomeWorkBtnNumber'?order=='ascending'?'0':'1':'';
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            changeMonth(val) {
                if (moment(new Date()).format('YYYY-MM')==moment(val).format('YYYY-MM')) {// 如果是本月 获取月初+昨天
                    this.startTime=moment(val).format('YYYY-MM-DD')
                    this.endTime=moment(new Date()).format('YYYY-MM-DD')
                } else {
                    this.startTime=moment(val).format('YYYY-MM-DD')
                    this.endTime=moment(val).add(1, 'month').add(-1, 'days').format('YYYY-MM-DD')
                }
            },
            exportFile() {
                let userId=this.uid,
                    schoolId=this.query.schoolId,
                    exueCode=this.query.eID, 
                    name=this.query.teacherName, 
                    startTime=this.startTime, // 月的第一天"，(必填)
                    endTime=this.endTime, // 月的最后一天"，(必填)（如果是当前月传昨天）
                    loginStatus=this.loginStatus, // 登录数排序
                    newStatus=this.newStatus, // 消息数排序
                    dongtaiStatus=this.dongtaiStatus, // 动态数排序
                    numStatus=this.numStatus;// 作业数排序
                window.location.href = `${LOCAL_API.scy}/report/exportTeacherVitality?userId=${userId}&schoolId=${schoolId}&exueCode=${exueCode}&name=${name}&startTime=${startTime}&endTime=${endTime}&loginStatus=${loginStatus}&newStatus=${newStatus}&dongtaiStatus=${dongtaiStatus}&numStatus=${numStatus}`.trim()
            },
            queryData() {
                this.loading = true;
                let page=this.pageQuery.currentpage,
                    rows=this.config.pageSize,
                    schoolId=this.query.schoolId,
                    exueCode=this.query.eID, 
                    name=this.query.teacherName, 
                    startTime=this.startTime, // 月的第一天"，(必填)
                    endTime=this.endTime, // 月的最后一天"，(必填)（如果是当前月传昨天）
                    loginStatus=this.loginStatus, // 登录数排序
                    newStatus=this.newStatus, // 消息数排序
                    dongtaiStatus=this.dongtaiStatus, // 动态数排序
                    numStatus=this.numStatus;// 作业数排序
                pageTeacherVitality(page, rows, schoolId, exueCode, name, startTime, endTime, loginStatus, newStatus, dongtaiStatus, numStatus).then(res => {
                    this.loading = false;
                    this.tableData = res.data.content.list;
                    this.pageQuery.total = res.data.content.pagination.total;
                }).catch(() => {
                    this.loading = false;
                    this.tableData = [];
                });
            }
            
        }

    }
</script>

<style lang="scss" scoped>

</style>

